<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_008_样式绑定</title>
    <style>
        .myStyle{
            border:1px solid red;
            width: 200px;
            height: 100px;
        }
        .background{
            background-color: blue;
        }
        .color{
            color:yellow;
        }
        .fontSize{
            font-size: 28px;
        }
    </style>

</head>
<body>
    <div id="app">
        <!-- 使用class来切换属性，多个class中间用逗号分开 -->
        <button v-on:click="qieHuan1()" >切换1</button>
        <div v-bind:class="{myStyle:myStyleIs1,background:backgroundIs1}" >使用class来切换属性</div>
        <!-- 使用class来切换属性，使用数组来划分 -->
        <button v-on:click="qieHuan2()" >切换2</button>
        <div v-bind:class="[myStyleIs2,backgroundIs2]" >使用class的数组来切换属性</div>
        <!-- 使用对象绑定和数组绑定结合使用 -->
        <button v-on:click="qieHuan3()" >切换3</button>
        <div v-bind:class="[myStyleIs2,backgroundIs2,{color:isColor}]" >使用class的数组和对象结合使用来切换属性</div>
         <!-- 数组简化操作 -->
         <button v-on:click="qieHuan4()" >切换4</button>
         <div v-bind:class="arrayClass">数组简化操作</div>
         <!-- 对象简化操作 -->
         <button v-on:click="qieHuan5()" >切换5</button>
         <div v-bind:class="objectClass">对象简化操作</div>
          <!-- 默认的class，如果本身就具有calss，并且用vue的bind添加了样式，不会覆盖，两者会叠加到一块 -->
          <button v-on:click="qieHuan6()" >切换6</button>
          <div class="fontSize" v-bind:class="{color:isColor}">默认class会和vue的样式叠加到一块</div>
          <!-- 通过style来添加样式 -->
          <button v-on:click="qieHuan7()" >切换7</button>
          <div class="fontSize" v-bind:style="{color:myColor}">通过style来添加样式</div>
           <!-- 通过style对象来添加样式 -->
           <button v-on:click="qieHuan8()" >切换8</button>
           <div v-bind:style="objStyle">通过style对象来添加样式</div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                myStyleIs1:true,
                backgroundIs1:true,
                myStyleIs2:"myStyle",
                backgroundIs2:"background",
                isColor:true,
                // 简化操作
                arrayClass:["myStyle","background"],
                objectClass:{
                    myStyle:true,
                    background:true
                },
                myColor:'red',
                objStyle:{
                    border:"1px solid red",
                    width:"100px",
                    height:"100px",
                    color:"red"
                }
            },
            methods:{
                qieHuan1:function(){
                    this.myStyleIs1=!this.myStyleIs1;
                    this.backgroundIs1=!this.backgroundIs1;

                },
                qieHuan2:function(){
                    if(this.myStyleIs2 == ""){
                        this.myStyleIs2 = "myStyle"
                    }else{
                        this.myStyleIs2 = ""
                    }
                },
                qieHuan3:function(){
                    this.isColor = !this.isColor;
                },
                qieHuan4:function(){
                    if(this.arrayClass.length == 0){
                        this.arrayClass = ["myStyle","background"];
                    }else{
                        this.arrayClass = [];
                    }
                },
                qieHuan5:function(){
                    this.objectClass.background = !this.objectClass.background;
                },
                qieHuan6:function(){
                    this.isColor = !this.isColor;
                },
                qieHuan7:function(){
                    if(this.myColor == "red"){
                        this.myColor = "blue";
                    }else{
                        this.myColor = "red";
                    }
                },
                qieHuan8:function(){
                    if(this.objStyle.color == "red"){
                        this.objStyle.color = "blue";
                    }else{
                        this.objStyle.color = "red";
                    }
                   
                }

                
            }
        });
    </script>
</body>

</html></SCRIPT>